<template>
	<div>
		<div class="item-show">
			<div class="item-content">
				<el-row>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总有效投注</span>
						<i
							v-if="isJump && hasPermission('701010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path:
										'/report/profitAndLossReport/memberProfitAndLoss'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.validBetAmount
								)
							}}
						</div>
					</el-col>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}游戏输赢</span>
						<i
							v-if="isJump && hasPermission('701010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path:
										'/report/profitAndLossReport/memberProfitAndLoss'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.netAmount
								)
							}}
						</div>
					</el-col>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总注单</span>
						<i
							v-if="isJump && hasPermission('701010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path:
										'/report/profitAndLossReport/memberProfitAndLoss'
								})
							"
						></i>
						<div class="show-money-url">
							{{ handleNumber('', billDetail.betCount, 0) }}
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="item-show">
			<div class="item-content">
				<el-row>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总返水</span>
						<i
							v-if="isJump && hasPermission('701010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path:
										'/report/profitAndLossReport/memberProfitAndLoss'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.memberRebateAmount
								)
							}}
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="item-show">
			<div class="item-content">
				<el-row>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总存款</span>
						<i
							v-if="isJump && hasPermission('702010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path: '/report/businessReport/memberReport'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.memberDepositAmount
								)
							}}
						</div>
					</el-col>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总取款</span>
						<i
							v-if="isJump && hasPermission('702010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path: '/report/businessReport/memberReport'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.memberWithdrawAmount
								)
							}}
						</div>
					</el-col>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总借款</span>
						<i
							v-if="isJump && hasPermission('404010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path:
										'/funds/memberFundsRecord/memberAccountChangeRecord'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.memberLoan
								)
							}}
						</div>
					</el-col>
					<el-col :span="5">
						<span>{{ accountInfo.prefixTitle }}总还款</span>
						<i
							v-if="isJump && hasPermission('404010')"
							class="el-icon-arrow-right"
							@click="
								handleJump({
									path:
										'/funds/memberFundsRecord/memberAccountChangeRecord'
								})
							"
						></i>
						<div class="show-money-url">
							{{
								handleNumber(
									billDetail.currency,
									billDetail.memberRepayment
								)
							}}
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		isJump: {
			type: Boolean,
			default: false
		},
		isProxy: {
			type: Boolean,
			default: false
		},
		billDetail: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	computed: {
		accountInfo() {
			if (this.isProxy) {
				return {
					prefixTitle: '会员',
					userType: 1
				}
			} else {
				return {
					prefixTitle: '',
					userType: undefined
				}
			}
		}
	},
	methods: {
		handleJump(obj) {
			obj.query = {
				userType: this.accountInfo.userType,
				userName: this.billDetail.userName,
				startDate: this.billDetail.reportStDate,
				endDate: this.billDetail.reportEnDate
			}
			this.$router.push(obj)
		}
	}
}
</script>
<style lang="scss" scoped>
.item-show {
	width: 100%;
	min-height: 80px;
	margin-right: 10px;
	margin-bottom: 20px;
	border-color: #bebebe;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	.item-title {
		color: #6a6a6a;
		font-size: 18px;
		font-weight: 900;
		margin-left: 10px;
		margin-top: 10px;
	}
	.item-content {
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		i {
			cursor: pointer;
		}
		span {
			line-height: 3;
		}
		.item-row-content {
			word-wrap: break-word;
			.item-row-five {
				min-width: 19%;
				display: inline-block;
			}
			.item-row-six {
				min-width: 16%;
				display: inline-block;
			}
		}
		.show-money {
			font-size: 15px;
			padding-left: 5px;
			color: black;
		}
		.show-money-url {
			font-size: 14px;
			color: black;
		}
	}
}
</style>
